<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <title>Projet Icone Library</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <link href="iconLibrary.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            nbImages = 0;

            function addImage() {
                if(baseImageIsSet()) {
                    mainSize = document.getElementById("mainImageSize").value;
                    imageName = document.getElementById("toAddImageName").value;
                    imageSize = document.getElementById("toAddImageSize").value;
                    imageOffsetX = document.getElementById("toAddImageOffsetX").value;
                    imageOffsetY = document.getElementById("toAddImageOffsetY").value;
                    if(imageSize >= 0 && imageSize <=100){
                        dimension = (imageSize*mainSize)/100;
                        if( parseInt((parseInt(imageOffsetX) + parseInt(dimension))) >= 0 && parseInt(imageOffsetX) < parseInt(mainSize) ) {
                            if(parseInt((parseInt(imageOffsetY) + parseInt(dimension))) >= 0 && parseInt(imageOffsetY) < parseInt(mainSize)) {
                                li = document.createElement("li");
                                id = "li"+nbImages;
                                li.setAttribute("id",id);
                                li.innerHTML = imageName+' <input type="hidden" name="imagesNames[]" value="'+imageName+'" /> ::'+
                                    'size = <input onkeydown="this.oldValue=this.value;" onkeyup="if((parseInt(this.value) < 0)   || (parseInt(this.value) > 100)) this.value=this.oldValue;" size="4" type="text" id="imageSize'+nbImages+'" name="imagesSizes[]" value="'+imageSize+'" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) &&   event.keyCode != 8 && event.keyCode != 9) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8 && event.keyCode != 9 ) return false;" />% ::'+
                                    'x = <input onfocus="this.oldValue=this.value;" onkeyup="mainSize = document.getElementById(\'mainImageSize\').value;imageSize = document.getElementById(\'imageSize'+nbImages+'\').value;dimension = (imageSize*mainSize)/100;if( parseInt((parseInt(this.value) + parseInt(dimension))) < 0 || parseInt(this.value) >= parseInt(mainSize) ) this.value = this.oldValue;" size="4" type="text" id="imageOffsetX'+nbImages+'" name="imagesOffsetsX[]" value="'+imageOffsetX+'" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 32 &&  event.keyCode != 8 && event.keyCode != 9 &&  event.charCode != 45) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8  && event.keyCode != 9  &&  event.charCode != 45 ) return false;" />px ::'+
                                    'y = <input onfocus="this.oldValue=this.value;" onchange="mainSize = document.getElementById(\'mainImageSize\').value;imageSize = document.getElementById(\'imageSize'+nbImages+'\').value;dimension = (imageSize*mainSize)/100;if( parseInt((parseInt(this.value) + parseInt(dimension))) < 0 || parseInt(this.value) >= parseInt(mainSize) ) this.value = this.oldValue;" size="4" type="text" id="imageOffsetY'+nbImages+'" name="imagesOffsetsY[]" value="'+imageOffsetY+'" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 32 &&  event.keyCode != 8 && event.keyCode != 9 &&  event.charCode != 45) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8  && event.keyCode != 9  &&  event.charCode != 45 ) return false;" />px '+
                                    '<a OnClick="suppImage(\''+id+'\');">Enlever cette image</a>';
                                document.getElementById("listeImages").appendChild(li);
                                nbImages++;
                            }
                            else alert("Offset Y incorrect");
                        }
                        else alert("Offset X incorrect");

                    }
                    else alert("La taille choisit n'est pas un pourcentage");
                }
                else alert("Vous devez d'abord définir l'image de base");
            }
            

            function suppImage(id) {
                child = document.getElementById(id);
                document.getElementById("listeImages").removeChild(child);
            }
            function baseImageIsSet() {
                mainSize = document.getElementById("mainImageSize").value;
                if(mainSize != "" && mainSize >0)
                    return true;
                else return false;

            }

        </script>

    </head>
    <body>
        <div id="wrapper">

            <div id="top-menu">
                <div id="account">
                </div>

            </div>
            <div id="header">

                <h1>Projet Icone Library</h1>

                <div id="main-menu">

                </div>
            </div>

            <div class="nosidebar" id="main">



                <div id="content">

                    <div class="splitcontentright">

                        <div class="box">
                            <h3>Formulaire ajout image a combiner</h3>
                            <ul>
                                <li>ComboBox nom image
                                    <select id="toAddImageName" name="toAddImageName">
                                        <% out.println(request.getSession().getAttribute("iconesNames"));%>
                                    </select>
                                </li>
                                <li>Taille (en % de l'image de base) : <input size="4" type="text" id="toAddImageSize" name="toAddImageSize" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) &&   event.keyCode != 8 && event.keyCode != 9) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8 && event.keyCode != 9 ) return false;"/></li>
                                <li>Offset :: x (en px) : <input size="4" type="text" id="toAddImageOffsetX" name="toAddImageOffsetX" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 32 &&  event.keyCode != 8 && event.keyCode != 9 && event.charCode != 45) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8 && event.keyCode != 9  &&  event.charCode != 45 ) return false;"/></li>
                                <li>Offset :: y (en px) : <input size="4" type="text" id="toAddImageOffsetY" name="toAddImageOffsetY" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) && event.keyCode != 32 &&  event.keyCode != 8 && event.keyCode != 9 && event.charCode != 45) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8 && event.keyCode != 9 &&  event.charCode != 45 ) return false;"/></li>
                            </ul>
                            <input onClick="javascript:if(baseImageIsSet())addImage();else alert('Vousdevez d\'abord définir l\'image de base !');" type="button" value="Ajouter" style="float:right;" /><br />
                        </div>


                    </div>
                    <div class="splitcontentleft">
                        <form action="IconeLibrary" method="POST" target="_blank" onsubmit="if(this.nomNouvelIcone.value ==''){alert('Vous n avez pas choisit de nom pour le nouvel icone !');return false;}">

                            <h3>image de base</h3>
                            <ul>
                                <li>ComboBox nom image
                                    <select name="mainImageName">
                                        <% out.println(request.getSession().getAttribute("iconesNames"));%>
                                    </select>
                                </li>
                                <li>Taille (en px) : <input size="4" type="text" id="mainImageSize" name="mainImageSize" onKeypress="if((event.keyCode < 48 || event.keyCode > 57) &&   event.keyCode != 8 && event.keyCode != 9 &&   event.keyCode != 47) event.returnValue = false; if((event.which < 48 || event.which > 57)  &&  event.which != 8 && event.keyCode != 9   &&  event.which != 47) return false;" /></li>
                            </ul>


                            <h3>Liste des images à ajouter </h3>
                            <ol id="listeImages">

                            </ol>

                            <h3>Filtre à appliquer</h3>
                            <ul>
                                <li>Filtre 
                                    <select name="filter">
                                        <option value="none">Aucun</option>
                                        <% out.println(request.getSession().getAttribute("filtresNames"));%>
                                    </select>
                                </li>
                            </ul>
                            <h3>Nom et type du nouvel icone</h3>
                            <ul>
                                <li>Nom 
                                    <input type="text" name="nomNouvelIcone" />

                                    Type
                                    <select name="type">
                                        <% out.println(request.getSession().getAttribute("typeImages"));%>
                                    </select>
                                </li>

                            </ul>
                            <input type="submit" value="Générer l'image" style="float:right;" />
                        </form>
                    </div>




                </div>

            </div>


            <div id="footer">
                M1 Info Nice - 2009/2010 - Ayede Sonia :: Gaudino Anthony :: Herche Bilal :: Teixeira Tiago :: Touati Samed  :: Wadjahdi Marc
            </div>
        </div>
    </body>
</html>

